<!-- 文章详情 -->
<template>
	<view class="" style="margin: 0;background: #FFFFFF;">
		<!-- 审核状态S -->
		<view class="shenhe tp-ptb0lr30 tp-pt30" v-if="detail.statusDesc=='审核失败'">
			<view class="flex flex_between">
				<view class="tp-fz32">
					<text style="color: #666666;">状态</text><text style="color: #333333;">: 审核未通过</text>
				</view>
				<view class="anniu" @click="again">
					重新发布
				</view>
			</view>
			<view class="tp-fz28 tp-mt20 tp-pb30" style="color: #666666;">
				未通过原因 <text>: {{detail.reason}}</text>
			</view>
		</view>
		<!-- 审核状态E -->
		<!-- 顶部 S-->
		<view class="top">
			<image :src="detail.customerAvater" class="topimg" mode="aspectFill"></image>
			<text class="toptit">{{detail.customerName||''}}</text>
			<text class="toptime">{{detail.createTime||''}}</text>
		</view>
		<view class="toptxt">
			<text>{{detail.articleName ||''}}</text>
		</view>
		<view class="topbq tp-ptb0lr30">
			<text v-for="item in detail.label" :key="item.id">{{'#' + item}}</text>
		</view>
		<!-- 短视频 S-->
		<video v-if="detail.video" class="video" :src="wwwImgUrl + detail.video" style="video"></video>
		<!-- 短视频 E-->
		<view class="message">
			<view class="txt">
				<jyf-parser :html="detail.content" ref="article"></jyf-parser>
			</view>
		</view>
		<!-- 顶部 E-->
		<!-- 景区 S -->
		<view class="" style="margin-top: 20rpx;" v-if="jingqulist">
			<view style="background: #FAFAFA;padding: 20rpx 30rpx 20rpx 30rpx;" class="  level_align tp-mt20" v-for="(item,index) in jingqulist"
			 :key="index" @click="pageJumps('/pagesSecond/scenic/scenicDetail' + '?id=' + item.jqId)">
				<view class="tp-pr">
					<image class="scenic-img tp-br12 tp-mr20" :src="wwwImgUrl + item.jqCover" mode="aspectFill"></image>
					<text class="img-lable tp-fcF">{{item.jqSeason ||''}}</text>
				</view>
				<view class="flex flex_column flex_between flex-1" style="height: 180rpx;">
					<view class="ellispsis1 tp-fc333 tp-fz28 tp-fw600">
						{{item.jqName ||''}}
					</view>
					<view class="tp-fc666 tp-fz26 ellispsis1">
						{{item.jqIntro ||''}}
					</view>
					<view class="level_align flex_between">
						<view class="ellispsis1  tp-mr20 tp-fc">
							{{item.sales ||''}}人已买
							<!-- | 距您{{item.distance}}km -->
						</view>
						<view class="tp-mt10 flex-1 flex_end level_align  tp-ofh">
							<view class="quan-tag tp-wsn tp-lh40 tp-ml10 tp-fc tp-bgf tp-br8 tp-border1 tp-fz22" v-for="(it,ind) in item.jqLabels"
							 :key="ind">
								{{it}}
							</view>
						</view>
					</view>
					<view class="level_align flex_between ">
						<view class="flex align_baseline">
							<view class="tp-fz24 tp-red tp-mr20 tp-fw600">
								￥<text class="tp-fz36">{{item.currentPrice ||''}}</text>起
							</view>
							<text class="tp-fz24 tp-fc999 tp-tdlt">
								￥{{item.originalPrice ||''}}
							</text>
						</view>
						<view class="tp-fz24 tp-yellow">
							{{item.jqScore ||''}}分
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 景区 E -->
		<!-- 酒店 S -->
		<view class="" style="margin-top: 20rpx;" v-if="jiudianlist">
			<!-- 如果单个商品需要间隔,那么取消这个最外层div -->
			<view class="list-hang  level_align tp-bgf" v-for="(item,index) in jiudianlist" :key="index" @click="pageJumps('/pagesSecond/hotel/hotelDetail' + '?id=' + item.hotelId)">
				<image class="hang-img tp-mr20 tp-br12" :src="wwwImgUrl + item.hotelCover" mode=""></image>
				<view class="hang-right flex flex_column flex-1">
					<view class="tp-fz28 tp-fc333 ellispsis1">
						{{item.hotelName ||''}}
					</view>
					<view class="level_align flex_between tp-mt20">
						<text class="huang-color"> <text v-if="item.hotelLevel" style="margin-right: 5rpx;">{{item.hotelLevel ||''}} | </text> {{item.hotelScore ||''}}分</text>
						<!-- <text class="tp-fc999">距您{{item.distance}}km</text> -->
					</view>
					<view class="level_align tp-mt20">
						<image class="tp-img28 tp-mr15" src="../static/icon/position1.png" mode=""></image>
						<text class="ellispsis1 flex-1">{{item.hotelLocation || ''}}</text>
					</view>
					<view class="level_align flex_between tp-mt20">
						<text class="ellispsis1 tp-fc tp-mr20"><text v-for="(ite,ind) in item.salePoints" :key="ind">{{'#' +ite}} </text></text>
						<view class="tp-fz24 tp-red tp-fw600">
							￥<text class="tp-fz36">{{item.hotelPrice ||''}}</text>起
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 酒店 E -->
		<!-- 商品 S-->
		<view class="shop" v-if="shoplist" v-for="(item,index) in shoplist" :key="index">
			<view class="shoptit">
				<view class="shopimg">
					<image @click="pageJumps('/pagesShop/details/details' + '?cid=' + item.id)" :src="wwwImgUrl + item.cover" mode=""></image>
				</view>
				<view class="shopname">
					<view class="shopone ellispsis1">
						<text>{{item.name ||''}}</text>
					</view>
					<view class="shopprice">
						<text class="pricelei">¥</text>
						<text class="nowprice">{{item.price ||''}}</text>
						<text class="oldprice" v-if="item.originPrice">¥ {{item.originPrice || ''}}</text>
						<text class="paynum">销量{{item.saleNum || ''}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品 E-->
		<!-- 按钮 S-->
		<view class="button-box tp-bgf flex flex_around tp-mt40" v-if="detail.statusDesc=='审核成功'">
			<view class="buttono center_combo" style="margin-left: 20rpx;" @click="getTopdetail">
				<image class="buttonimg" src="../static/icon/shang.png" mode=""></image>
				<text class="tp-fz28 tp-fc333">上一篇</text>
			</view>
			<view class="buttono center_combo" style="margin-right: 20rpx;" @click="getLastdetail">
				<image class="buttonimg" src="../static/icon/xia.png" mode=""></image>
				<text class="tp-fz28 tp-fc333">下一篇</text>
			</view>
		</view>
		<!-- 按钮 E-->
		<view style="height: 98rpx;">
			
		</view>
		<!-- 功能 S-->
		<view class="gongneng align_center flex" v-if="detail.statusDesc=='审核成功'">
			<view class="gnone column_align tp-mt20 " style="margin-left: 10rpx;">
				<image class="gnimg " src="../static/icon/seenum.png" mode=""></image>
				<text class="tp-fz24 tp-fc666">{{detail.readNum || 0}}</text>
			</view>
			<view class="gnone fenjie column_align tp-mt20" @click="openComment">
				<image class="gnimg " src="../static/icon/talk.png" mode=""></image>
				<text class="tp-fz24 tp-fc666">{{detail.commentNum || 0}}</text>
			</view>
			<view class="gnone column_align tp-mt20 " @click="pageJumps('/pagesSecond/strategy/writeTxt')">
				<image class="gnimg " src="../static/icon/write.png" mode=""></image>
				<text class="tp-fz24 tp-fc666">发布文章</text>
			</view> 
			<view class="gnone column_align tp-mt20 " @click="collect">
				<image class="gnimg " v-if="detail.isCollect == 1" src="../static/icon/collection.png" mode=""></image>
				<image class="gnimg " v-else src="../static/icon/collection1.png" mode=""></image>
				<!-- 	<image class="tp-img64" v-if="scenicDetail.isCollect == 1" src="../static/icon/shou0.png" mode=""></image>
					<image class="tp-img64" v-else src="../static/icon/shou1.png" mode=""></image> -->
				<text class="tp-fz24 tp-fc666">收藏</text>
			</view>
			<view class="gnone column_align tp-mt20 ">
				<button class="sharebutton" type="default" open-type="share">
					<image class="gnimg " src="../static/icon/share.png" mode=""></image>
				</button>
				<text class="tp-fz24 tp-fc666" style="margin-bottom: 18rpx;">分享</text>

			</view>
			<view class="gnone column_align tp-mt20 " @click="todasang">
				<image class="gnimg " src="../static/icon/exceptional.png" mode=""></image>
				<text class="tp-fz24 tp-fc666">打赏</text>
			</view>
		</view>
		<!-- 功能 E-->
		<!-- 评论列表 S -->
		<uni-popup ref="isComment" type="bottom">
			<view class="comment">
				<view class="comment_head flex align_center flex_center">
					<text>{{detail.commentNum}}条评论</text>
					<view class="close" @click="closeComment">
						<uni-icons type="closeempty" size="25" color="#999"></uni-icons>
					</view>
				</view>

				<scroll-view scroll-y="true" class="comment_main" @scrolltolower="handleScrolltolower">
					<view class="comment_ul">
						<view class="comment_li flex" v-for="(item,index) in commentlist" :key="index">
							<view class="comment_li_img">
								<image style="border-radius: 50%;" :src="item.customerAvater" mode="scaleToFill" ></image>
							</view>
							<view class="comment_li_txt">
								<view class="comment_li_txt_name">{{item.customerName ||''}}</view>
								<view class="comment_li_txt_con">
									<view class="comment_li_title ellispsis2">{{item.content ||''}}</view>
									<view class="comment_li_time">{{item.prettyTime ||''}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="uni-loadmore " v-if="showLoadMore">{{loadMoreText ||''}}</view>
				</scroll-view>


				<view class="comment_footer flex align_center">
					<view class="comment_footer_ipt">
						<input type="text" placeholder="有爱评论，说点好听的~" placeholder-style="color:#999999" @input="kongge" :value="pltxt" />
					</view>
					<view class="comment_footer_btn flex align_center flex_center" @click="pinglun">评论</view>
				</view>
			</view>
		</uni-popup>
		<!-- 品论列表 E -->
		<!-- 筛选的弹框 E-->

	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
	export default {
		components: {
			jyfParser
		},
		data() {
			return {
				id: '', //接收id
				detail: '', //数据
				preId: '', //上一篇id
				lastId: '', //下一篇id
				commentlist: [], //评论列表
				pltxt: '', //发布的评论
				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 10, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				showLoadMore: false, // 加载更多
				loadMoreText: "加载中...",
				productIntroVos: [], //插入的所有商品
				jiudianlist: [], //酒店列表
				jingqulist: [], //景区列表
				shoplist: [], //商品列表
			};
		},
		onLoad(opt) {
			console.log(opt)
			this.id = opt.id
		},
		onShow() {
			this.getDetail()
		},
		// 分享
		onShareAppMessage(res) {
			return {
				title: '好物分享-' + this.detail.articleName,
				path: 'pagesSecond/strategy/strategyMessage?id=' + this.id,
				// imageUrl: this.swpList[0]
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getDetail()
		},
		methods: {
			//重新发布 
			 again(){
					uni.navigateTo({
						url: '/pagesSecond/strategy/writeTxt?xqid=' + this.detail.id//携带JSON.stringify(this.detail) 
					})
			}, 
			//获取详情
			getDetail() {
				this.shoplist = []
				this.$http.get(this.$api.activityDetail + '?glId=' + this.id).then(res => {
					uni.stopPullDownRefresh();
					if (res.code == 200) {
						if (!res.data.customerAvater.startsWith('http')) {
							res.data.customerAvater = this.$imgUrl + res.data.customerAvater
						}
						this.detail = res.data
						console.log(this.detail)
						this.lastId = res.data.lastId
						this.preId = res.data.preId
						res.data.productIntroVos.forEach(item => {
							if (item.productType == 1) {
								this.jiudianlist = item.hotelIndexIntroVos
							}
							if (item.productType == 2) {
								this.jingqulist = item.jqIndexIntroVos
							}
							if (item.productType == 3) {
								this.shoplist.push(item)
							}
						})
					}
				})
			},
			//获取上一篇详情
			getTopdetail() {
				// let idd = this.preId
				if (this.preId == -1) {
					uni.showToast({
						title: '没有更多了!',
						icon: 'none'
					})
					return
				}
				this.$http.get(this.$api.activityDetail + '?glId=' + this.preId).then(res => {
					uni.stopPullDownRefresh();
					if (res.code == 200) {
						if (!res.data.customerAvater.startsWith('http')) {
							res.data.customerAvater = this.$imgUrl + res.data.customerAvater
						}
						this.detail = res.data
						this.lastId = res.data.lastId
						this.preId = res.data.preId
						this.id = res.data.id
						this.jiudianlist = []
						this.jingqulist = []
						this.shoplist = []
						res.data.productIntroVos.forEach(item => {
							if (item.productType == 1) {
								this.jiudianlist = item.hotelIndexIntroVos
							}
							if (item.productType == 2) {
								this.jingqulist = item.jqIndexIntroVos
							}
							if (item.productType == 3) {
								this.shoplist.push(item)
							}
						})
					}
				})
			},
			//获取下一篇详情
			getLastdetail() {
				// let idd = this.preId
				if (this.lastId == -1) {
					uni.showToast({
						title: '没有更多了!',
						icon: 'none'
					})
					return
				}
				this.$http.get(this.$api.activityDetail + '?glId=' + this.lastId).then(res => {
					uni.stopPullDownRefresh();
					if (res.code == 200) {
						if (!res.data.customerAvater.startsWith('http')) {
							res.data.customerAvater = this.$imgUrl + res.data.customerAvater
						}
						this.detail = res.data
						this.lastId = res.data.lastId
						this.preId = res.data.preId
						this.id = res.data.id
						this.jiudianlist = []
						this.jingqulist = []
						this.shoplist = []
						res.data.productIntroVos.forEach(item => {
							if (item.productType == 1) {
								this.jiudianlist = item.hotelIndexIntroVos
							}
							if (item.productType == 2) {
								this.jingqulist = item.jqIndexIntroVos
							}
							if (item.productType == 3) {
								this.shoplist.push(item)
							}
						})
					}
				})
			},
			//获取评论列表
			getpinglun() {
				this.$http.get(this.$api.activityCommentList + '?glId=' + this.id + '&pageNum=' + this.pageNum + '&pageSize=' +
					this.pageSize, ).then(res => {
					this.showLoadMore = false;
					if (res.code == 200) {
						this.last_page = res.data.pageTotal
						res.data.result.map(item => {
							if (!item.customerAvater.startsWith('http')) {
								item.customerAvater = this.$imgUrl + item.customerAvater
							}
						})
						if (this.pageNum > 1) {
							this.commentlist = this.commentlist.concat(res.data.result);
						} else {
							this.commentlist = res.data.result
						}
					}
				})
			},
			// 上拉触底
			handleScrolltolower() {
				this.showLoadMore = true;
				if (this.pageNum < this.last_page) {
					this.pageNum++
					this.getpinglun()
				} else {
					this.loadMoreText = "没有更多评论了!"
				}
			},
			//去除input首尾空格
			kongge(e){
				this.pltxt = e.detail.value.trim()
			},
			//发布评论
			pinglun() {
				if(this.pltxt == ''){
					return uni.showToast({
						title: '评论不能为空',
						icon: 'none'
					})
				}
				let param = {
					glId: this.id,
					content: this.pltxt, //评价内容
					getCommentPid: -1, //父评价ID,
				}
				this.$http.post(this.$api.activityComment, param).then(res => {
					if (res.code == 200) {
						this.getpinglun()
						uni.showToast({
							title: '评论成功',
							icon: 'none'
						})
						this.pltxt = ''
					}
				})
			},
			//关闭评论列表
			closeComment() {
				this.$refs.isComment.close()
			},
			//打开评论列表
			openComment() {
				this.pageNum = 1
				this.getpinglun()
				this.$refs.isComment.open()
			},
			// 去打赏
			 // pageJumps('/pagesSecond/strategy/strategyDasang?id='+id)
			todasang(){
				uni.navigateTo({
					url: '/pagesSecond/strategy/strategyDasang?id='+this.id+ '&customerAvater=' + this.detail.customerAvater + '&customerName=' + this.detail.customerName
				})
			},
			// 收藏
			collect() {
				this.$http.get(this.$api.activityCollect + '?glId=' + this.id).then(res => {
					if (res.code === 200) {
						this.getDetail()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 审核状态 */
	.shenhe{
		background: #EEFAFF;

	}
	.anniu{
		width: 120rpx;
		height: 40rpx;
		background: #FFAF3C;
		border-radius: 8rpx;
		text-align: center;
		line-height: 40rpx;
		color: #FFFFFF;
	}
	/* 顶部 S*/
	.top {
		width: 90%;
		margin: 0 auto;
		padding-top: 20rpx;
		margin-bottom: 10rpx;
		height: 80rpx;

		.topimg {
			float: left;
			margin-right: 10rpx;
			margin-top: 8rpx;
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
		}

		.toptit {
			line-height: 80rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.toptime {
			float: right;
			line-height: 80rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}

	.toptxt {
	
		width: 90%;
		margin: 0 30rpx 30rpx 30rpx;
		height: 42rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;

	}

	.topbq {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #00B4FF;

	}

	/* 顶部 E*/
	/* 视频 S*/
	 .video {
		margin: 30rpx;
		width: 690rpx;
		height: 360rpx;
		border-radius: 8rpx;
	} 

	/* 风景介绍 S*/
	.message {
		width: 90%;
		margin: 0 auto;
	}

	/* 风景介绍 E*/
	.scenic-img {
		width: 240rpx;
		height: 180rpx;
	}

	.img-lable {
		position: absolute;
		top: 0;
		left: 0;
		padding: 6rpx;
		background: rgba(0, 0, 0, .3);
		color: rgba(255, 255, 255, .8);
		border-radius: 12rpx 0px 12rpx 0px;
	}

	.quan-tag {
		display: inline-block;
		padding: 0 6rpx;
		border-color: $tc;
	}

	// 插入的酒店景区样式
	.left-box {
		width: 80rpx;
		padding-bottom: 20rpx;

	}

	.list-hang {
		padding: 30rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		background: #FAFAFA;
	}

	.hang-img {
		width: 248rpx;
		height: 208rpx;
	}

	.hang-right {
		height: 208rpx;
	}

	.huang-color {
		color: #FFAF3C;
	}

	.list-kuai {
		width: 50%;

		.kuai-img {
			width: 335rpx;
			height: 280rpx;
			border-radius: 12rpx 12rpx 0px 0px;
		}
	}

	/* 商品 S*/
	.shop {
		width: 100%;
		height: 180rpx;
		box-sizing: border-box;
		background: #FAFAFA;
		border-radius: 12rpx;
		padding-top: 20rpx;
		margin-top: 20rpx;

		.shoptit {

			width: 90%;
			margin: 0 auto;

			.shopimg {
				width: 140rpx;
				height: 140rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				float: left;
			}

			.shopname {
				float: left;
				width: 276rpx;
				margin: 22rpx 0 20rpx 20rpx;

				.shopone {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}

				.shopprice {
					width: 530rpx;

					.pricelei {
						font-size: 24rpx;
						font-weight: bold;
						color: #FF4A37;
						line-height: 42px;
						margin-right: 5rpx;
					}

					.nowprice {
						font-size: 36rpx;
						font-weight: bold;
						color: #FF4A37;
						line-height: 42rpx;
						margin-right: 10rpx;
					}

					.oldprice {
						font-size: 24rpx;
						font-weight: 500;
						text-decoration: line-through;
						color: #999999;
						line-height: 42rpx;

					}

					.paynum {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-top: 25rpx;
						margin-right: 30rpx;
						float: right;
					}
				}
			}
		}

	}

	/* 商品 S*/
	/* 按钮 S*/
	.button-box {
		width: 100%;

		.buttono {
			width: 320rpx;
			height: 72rpx;
			background: #E8F8FF;
			border-radius: 36rpx;
			margin-bottom: 40rpx;

			.buttonimg {
				width: 30rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}
	}

	/* 按钮 E*/
	/* 功能 S*/
	.gongneng {
		position: fixed;
		/* #ifdef H5 */
		bottom: 0;
		// bottom: 30rpx;
		/* #endif */
		/* #ifndef H5 */
		bottom: calc(env(safe-area-inset-bottom)/2);
		/* #endif */
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.12);

		.gnone {
			height: 98rpx;
			width: 100rpx;

			.sharebutton {
				background: transparent;
				padding: 0;
				line-height: 40rpx;

				&::after {
					border: 0;
				}
			}

			.gnimg {
				width: 44rpx;
				height: 44rpx;
				margin-bottom: 5rpx;
			}
		}

		.fenjie {
			margin-right: 140rpx;
		}
	}

	/* 功能 E*/
	/* 评论列表 S*/
	.comment {
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;

		.comment_head {
			position: relative;
			padding: 26rpx;

			text {
				font-size: 28rpx;
			}

			.close {
				position: absolute;
				top: 50%;
				right: 20rpx;
				transform: translateY(-50%);
			}
		}

		.comment_main {
			height: 580rpx;

			.comment_ul {

				padding: 0 30rpx;

				.comment_li {
					margin-bottom: 30rpx;

					.comment_li_img {
						width: 64rpx;
						height: 64rpx;
						flex-shrink: 0;
						margin-right: 20rpx;
					}

					.comment_li_txt {
						.comment_li_txt_name {
							color: #666666;
							font-size: 26rpx;
							margin-bottom: 20rpx;
						}

						.comment_li_txt_con {
							position: relative;
							width: 610rpx !important;

							.comment_li_title {
								font-size: 28rpx;
								line-height: 36rpx;
								width: 453rpx;
							}

							.comment_li_time {
								position: absolute;
								bottom: 0;
								right: 0;
								color: #999999;
								font-size: 26rpx;
							}
						}
					}
				}
			}
		}

		.comment_footer {
			height: 97rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.15);
			padding-left: 30rpx;

			.comment_footer_ipt {
				width: 600rpx;
				height: 64rpx;
				background: #F2F2F2;
				border-radius: 32rpx;

				input {
					width: 100%;
					height: 100%;
					display: block;
					font-size: 24rpx;
					box-sizing: border-box;
					padding: 0 20rpx;
				}
			}

			.comment_footer_btn {
				flex: 1;
				color: #FF4A37;
				font-size: 30rpx;
			}
		}
	}

	/* 评论列表 E*/
</style>
